<!--
 * @Author: wangshiyang
 * @Date: 2023-06-19 13:57:20
 * @LastEditors: wangshiyang
 * @LastEditTime: 2023-06-19 14:04:26
 * @Description: 请填写简介
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js"></script>
    <script src='https://unpkg.com/@antv/l7'></script>
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v1.0.0/mapbox-gl-language.js'></script>
    <style>
        html,
        body {
            overflow: hidden;
            margin: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdiZW5jaGFvIiwiYSI6ImNsODU3aGRiODA0Y2UzcHBzZmFlcmdqZ2sifQ.8k59W_pB_Riwe6o-MneRlA'
        const map = new mapboxgl.Map({
            container: 'map', // container id
            style: 'mapbox://styles/mapbox/streets-v12', // stylesheet location
            center: [114.30, 30.50],
            zoom: 4
        });
        map.addControl(new MapboxLanguage({
            defaultLanguage: 'zh-Hans'  // 设置默认语言
        }))
        const { Scene, Mapbox, PolygonLayer,PointLayer, Logo, Zoom, Scale, Fullscreen, ExportImage, LayerSwitch, MouseLocation, MapTheme } = L7;
        const scene = new Scene({
            id: 'map',
            map: new Mapbox({
                mapInstance: map,
            }),
        });
        const colors = ['#303841', '#ff2e63', '#30e3ca', '#fcbad3', '#aa96da', '#cca8e9', '#ff9a00', '#625772', '#b61aae', '#a7ff83', '#ba52ed']
        scene.on('loaded', () => {
            // logo控件
            const logo = new Logo({
                // 图片 url
                img: 'https://img.gejiba.com/images/dfdb6db1623eb881e724f58d9a366af8.png',
                // 跳转地址
                href: 'http://www.x-zd.com/m',
            });
            scene.addControl(logo);

            // 缩放控件
            // const zoom = new Zoom({
            //     zoomInTitle: '放大',
            //     zoomOutTitle: '缩小',
            // });
            // scene.addControl(zoom);

            const scale = new Scale({
                zoomInTitle: '放大',
                zoomOutTitle: '缩小',
            });
            scene.addControl(scale);

            // 全屏控件
            const fullscreen = new Fullscreen({
                btnText: '全屏',
                exitBtnText: '退出全屏',
            });
            scene.addControl(fullscreen)

            // 导出图片控件
            const exportImage = new ExportImage({
                onExport: (base64) => {
                    alert(base64)
                },
            });
            scene.addControl(exportImage);

            // 图层显隐控件
            const layer = new PointLayer({
                name: '点图层',
            });
            layer.source({
                type: "FeatureCollection",
                features: [
                    {
                        type: "Feature",
                        geometry: {
                            type: "Point",
                            coordinates: [114.30, 30.50]
                        }
                    }
                ]
            })
                .shape("circle")
                .color("#333")
                .style({
                    opacity: 0.5,
                    strokeWidth: 1
                })
                .size(20)
                .active(true)
            scene.addLayer(layer);

            const layerSwitch = new LayerSwitch({
                layers: [layer],
            });
            scene.addControl(layerSwitch);

            // 鼠标位置控件
            const mouseLocation = new MouseLocation({
                transform: (position) => {
                    return position;
                },
            });
            scene.addControl(mouseLocation);

            // 地图主题控件
            const mapTheme = new MapTheme({});
            scene.addControl(mapTheme);
        });

    </script>
</body>

</html>